<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*去掉标签默认样式*/
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		input {
			margin: 0;
		}

		/*初始化样式*/
		.star_evaluate {
			position: relative;
			width: 100px;
			height: 20px;
			background: url("./images/star3.png") repeat-x;
			background-size: 20px 20px;
			overflow: hidden;
		}

		.star,
		.score {
			display: block;
			height: 20px;
			width: 20px;
			position: absolute;
		}

		.star {
			z-index: 2;
		}

		.score {
			opacity: 0;
		}

		.star_1,
		.score_1 {
			left: 0;
		}

		.star_2,
		.score_2 {
			left: 20px;
		}

		.star_3,
		.score_3 {
			left: 40px;
		}

		.star_4,
		.score_4 {
			left: 60px;
		}

		.star_5,
		.score_5 {
			left: 80px;
		}

		/*鼠标悬浮*/
		.star:hover {
			cursor: pointer;
			background: url("./images/star2.png") repeat-x;
			background-size: 20px 20px;
			left: 0;
			z-index: 1;
		}

		.star_1:hover {
			width: 20px;
		}

		.star_2:hover {
			width: 40px;
		}

		.star_3:hover {
			width: 60px;
		}

		.star_4:hover {
			width: 80px;
		}

		.star_5:hover {
			width: 100px;
		}

		/*选中之后*/
		.score:checked+.star {
			background: url("./images/star2.png") repeat-x;
			background-size: 20px 20px;
			left: 0;
		}

		.score_1:checked+.star_1 {
			width: 20px;
		}

		.score_2:checked+.star_2 {
			width: 40px;
		}

		.score_3:checked+.star_3 {
			width: 60px;
		}

		.score_4:checked+.star_4 {
			width: 80px;
		}

		.score_5:checked+.star_5 {
			width: 100px;
		}
	</style>
</head>

<body>

	<form id="score_form">
		<div class="star_evaluate">
			<input type="radio" id="scoreId_1" class="score score_1" name="score" value="1" />
			<label for="scoreId_1" class="star star_1"></label>
			<input type="radio" id="scoreId_2" class="score score_2" name="score" value="2" />
			<label for="scoreId_2" class="star star_2"></label>
			<input type="radio" id="scoreId_3" class="score score_3" name="score" value="3" />
			<label for="scoreId_3" class="star star_3"></label>
			<input type="radio" id="scoreId_4" class="score score_4" name="score" value="4" />
			<label for="scoreId_4" class="star star_4"></label>
			<input type="radio" id="scoreId_5" class="score score_5" name="score" value="5" />
			<label for="scoreId_5" class="star star_5"></label>
		</div>
	</form>
</body>

</html>